<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自定义指令</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <!-- 1 简介 -->
    <!--   1.3 然后你可以在模板中任何元素上使用新的 v-focus property，如下： -->
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <input v-focus>
    </div>
    
    <!-- 2 钩子函数 -->
    
    <!-- 3 钩子函数参数 -->
    <div id="app2" v-demo:foo.a.b="message" style="border: 1px dashed blue;margin-bottom: 2px;">
    </div>
    
    <!-- 4 动态指令参数 -->
    <div id="app3" style="border: 1px dashed red;margin-bottom: 2px;">
      <p>Scroll down the page</p>
      <p v-pin="235">Stick me 235px from the top of the page</p>
    </div>
    
    <div id="app4" style="border: 1px dashed blue;margin-bottom: 2px;">
      <h3>Scroll down inside this section ↓</h3>
      <p v-pin2:[direction]="235">I am pinned onto the page at 235px to the left.</p>
    </div>
    <!-- 5 函数简写 -->
    <!-- 6 对象字面量 -->
    <div id="app5" v-demo="{color: 'white', text: 'hello!'}" style="border: 1px dashed red;margin-bottom: 2px;"></div>
    
    
    <script type="text/javascript">
      // 1 简介
      //   举个聚焦输入框的例子，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：
      //   1.1 注册一个全局自定义指令 `v-focus`
      Vue.directive('focus', {
          // 当被绑定的元素插入到 DOM 中时……
          inserted: function(el) {
            // 聚焦元素
            el.focus()
          }
      })
      new Vue({
        el: '#app1'
      })
      
      //   1.2 如果想注册局部指令，组件中也接受一个 directives 的选项：
      /* directives: {
        focus: {
          // 指令的定义
          inserted: function(el) {
            el.focus()
          }
        }
      } */
      
      // 2 钩子函数
      
      // 3 钩子函数参数
      //   这是一个使用了这些 property 的自定义钩子样例：
      Vue.directive('demo', {
        bind: function(el, binding, vnode) {
          var s = JSON.stringify
          el.innerHTML = 
          'name: ' + s(binding.name) + '<br>' +
          'value: ' + s(binding.value) + '<br>' +
          'expression: ' + s(binding.expression) + '<br>' +
          'argument: ' + s(binding.argument) + '<br>' +
          'modifiers: ' + s(binding.modifiers) + '<br>' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
        }
      })
      
      new Vue({
        el: '#app2',
        data: {
          message: 'hello!'
        }
      })
      
      // 4 动态指令参数
      Vue.directive('pin', {
        bind: function(el, binding, vnode) {
          el.style.position = 'fixed'
          el.style.top = binding.value + 'px'
        }
      })
      
      new Vue({
        el: '#app3',
      })
      // 这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。
      
      Vue.directive('pin2', {
        bind: function(el, binding, vnode) {
          el.style.position = 'fixed'
          var s = (binding.arg == 'left' ? 'left' : 'top' )
          // el.style[s] = binding.value + 'px'
          el.style[binding.arg] = binding.value + 'px'
        }
      })
      
      new Vue({
        el: '#app4',
        data: function() {
          return {
            direction: 'left'
          }
        }
      })

      // 5 函数简写
      /* 在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
      
      Vue.directive('color-swatch', function (el, binding) {
        el.style.backgroundColor = binding.value
      }) */
      
      // 6 对象字面量
      //   如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
      Vue.directive('demo', function(el, binding) {
        console.log(binding.value.color)
        console.log(binding.value.text)
      })

      new Vue({
        el: '#app5'
      })
      
    </script>
  </body>
</html>
